<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style media='screen'>
	body {
		background-color: #000;
		color: grey;
	}
	.marker-image {
		width: auto;
		height:40%;
		pointer-events: none;
	}

	@media screen and (orientation:portrait) {
		.marker-image {
			width:40%;
			height: auto;
		}
	}

	.marker-center {
		position: absolute;
		top: 50%;
		left: 50%;
		/* bring your own prefixes */
		transform: translate(-50%, -50%);		
	}
	.marker-topleft {
		position: absolute;
		top: 0;
		left: 0;
	}
	.marker-topright {
		position: absolute;
		top: 0;
		right: 0;
	}
	.marker-bottomleft {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.marker-bottomright{
		position: absolute;
		bottom: 0;
		right: 0;
	}
	
	.trackingBackend-aruco .markers-artoolkit {
		display : none;
	}
	.trackingBackend-aruco .markers-aruco {
		display : block;
	}
	.trackingBackend-artoolkit .markers-artoolkit {
		background-color: #444;
		display : block;
	}
	.trackingBackend-artoolkit .markers-aruco {
		display : none;
	}
</style>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
	<div style='position: absolute; top: 10px; width:100%; text-align: center;';>
		<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - Multi marker marker page
		by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
	</div>
	<div style='position: absolute; bottom: 10px; width:100%; text-align: center;';>
		Tracking : <span id='currentTracking'></span>
		- set
		<a href='javascript:void(0)' onclick='setTrackingBackend("artoolkit")'>artoolkit</a> /
		<a href='javascript:void(0)' onclick='setTrackingBackend("aruco")'>aruco</a>
	</div>
	<div class='markers-aruco'>
		<img class='marker-center marker-image' src='../../../../three.js/src/threex/threex-aruco/examples/images/1001.png'>
		<img class='marker-topleft marker-image' src='../../../../three.js/src/threex/threex-aruco/examples/images/1002.png'>
		<img class='marker-topright marker-image' src='../../../../three.js/src/threex/threex-aruco/examples/images/1003.png'>
		<img class='marker-bottomleft marker-image' src='../../../../three.js/src/threex/threex-aruco/examples/images/1004.png'>
		<img class='marker-bottomright marker-image' src='../../../../three.js/src/threex/threex-aruco/examples/images/1005.png'>
	</div>
	<div class='markers-artoolkit'>
		<img class='marker-center marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-hiro.png'>
		<img class='marker-topleft marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterA.png'>
		<img class='marker-topright marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterB.png'>
		<img class='marker-bottomleft marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterC.png'>
		<img class='marker-bottomright marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterF.png'>
	</div>
	<script>
		// honor trackingBackend
		var trackingBackend = location.hash.substring(1) || 'artoolkit'
		setTrackingBackend(trackingBackend)
		
		function setTrackingBackend(trackingBackend){
			document.body.classList.remove('trackingBackend-artoolkit')			
			document.body.classList.remove('trackingBackend-aruco')			
			document.querySelector('#currentTracking').innerHTML = trackingBackend
			if( trackingBackend === 'artoolkit' ){
				document.body.classList.add('trackingBackend-artoolkit')
			}else if( trackingBackend === 'aruco' ){
				document.body.classList.add('trackingBackend-aruco')			
			}else console.assert(false)
		}
	</script>
</body>
